<!-- 首页 -->
<template>
  <div class="home">
    <!-- 标签页 -->
    <div class="home-content">
      <van-tabs v-model="tabId" :ellipsis="false" swipeable color="#FF8800" title-active-color="#FF8800">
        <van-tab v-for="(val, idx) in tabItems" :key="idx" :title="val.txt" style="min-height: calc(100vh - 160px)">
          <keep-alive max="5">
            <component v-if="tabId===idx" :is="tabItems[idx].temp" :options="tabItems[idx].options"></component>
          </keep-alive>
        </van-tab>
      </van-tabs>
      <div class="wrapper">
<!--        <keep-alive max="5">-->
<!--          <component :is="tabItems[tabId].temp" :options="tabItems[tabId].options"></component>-->
<!--        </keep-alive>-->
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Recommend from '@/views/home/Recommend.vue'
import Laos from '@/views/home/Laos.vue'
import Epidemic from '@/views/home/Epidemic.vue'
import China from '@/views/home/China.vue'
import Rove from '@/views/home/Rove.vue'
import Disclose from '@/views/home/Disclose.vue'
export default {
  components: {
    home_recommend: Recommend,
    home_laos: Laos,
    home_epidemic: Epidemic,
    home_china: China,
    home_rove: Rove,
    home_disclose: Disclose
  },
  name: 'Home',
  data () {
    return {
      searchTxt: '',
      tabId: 0, // 当前tabId
      tabItems: [
        { txt: '推荐', temp: 'home_recommend' },
        { txt: '老挝', temp: 'home_laos' },
        { txt: '战疫情', temp: 'home_epidemic' },
        { txt: '中国', temp: 'home_china' },
        { txt: '老漂故事', temp: 'home_rove' },
        { txt: '爆料吐槽', temp: 'home_disclose' },
        { txt: '精选', temp: '' },
        { txt: '互助', temp: '' },
        { txt: '茶座', temp: '' },
        { txt: '转让创投', temp: '' },
        { txt: '视频', temp: '' },
        { txt: '学老语', temp: '' },
        { txt: '百科', temp: '' }
      ]
    }
  }
}
</script>

<style type="scss">
  /* 头部标题 */
  .header_title {
    color: white;
    font-size: 1.2rem;
  }
  /* 标签间距 */
  .home-content .van-tab {
    line-height: 2.0rem !important;
    flex-basis: auto!important;
    padding: 0 10px!important;
  }
  /* 标签页字体 */
  .home-content .van-tab__text {
    font-size: 1.0rem;
  }
   /* 标签页定死在头部,并调整下划线高度 */
  .home-content .van-tabs__wrap {
    height: 2.1rem !important;
    position: fixed !important;
    top: 74px !important;
    left: 0px !important;
    right: 0 !important;
    z-index: 101;
    display: block !important;
  }
  .home-content .van-tabs__content{
    margin-top: 36px;
  }
  /* 消除标签上边框，保留下边框 */
  .home-content .van-tabs .van-hairline--top-bottom::after {
    border-width: 0px 0px 1px 0px !important;
  }
</style>
